<template>
  <div>
    <van-cell-group>
      <van-cell to="/home/my/Extension" title="邀请有礼" is-link />
      <van-cell title="我的学习规划师" is-link />
      <van-cell is-link @click="showPopup">关注公众号</van-cell>
      <van-popup v-model:show="show">
        <div class="content">
          <h5>关注爱课公众号</h5>
           <p>您将获得以下集中特权</p>
           <ul>
             <li>
               <b>学习资料</b>
               <span>课程资料在线下载</span>
              </li>
              <li>
               <b>福利活动</b>
               <span>课程资料在线下载</span>
              </li>
              <li>
               <b>专属客服</b>
               <span>一对一客服答疑</span>
              </li>
           </ul>
           <van-button type="primary">关注爱课公众号</van-button>
        </div>
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};
</script>

<style lang="less" scoped>
  .content{
    width: 8rem;
    height: 11rem;
  }
  h5{
    font-size: 30px;
    text-align: center;
  }
  p{
    font-size: 16px;
    position: absolute;
    left: 1.9rem;
    top: 2rem;
  }
  span{
    font-size: 14px;
    position: absolute;
    left: 2.2rem;
    margin-top: 1rem;
  }
  li{
    width: 4rem;
    height: 2rem;
    margin-left: 2rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .van-button{
    margin-left: 2rem;
  }
</style>
